<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <textarea
    id="area"
    style="width: 400px; height: 200px; border: solid 2px pink"
  >
  </textarea></br>
  <button class="submit">发布评论</button>
  <ul id="list">
     
  </ul>
</body>
<script>
    // function Add(){
    //         var area=document.querySelector("#area");
    //         var list=document.querySelector('#list');
    //         list.innerHTML+=` <li><span>${area.value}</span> 
    //         <button>编辑</button>
    //         <button onclick="Delete(${list.children.length})" id='${list.children.length}'>删除</button>
    //     </li>`
    //     area.value='';
    //     }
    //     function Delete(index){
    //        document.getElementById(index+'').parentNode.remove();
    //     }
    $(function(){
        $(".submit").click(function(){
            var area=$("#area").val();
            $("#list").append(`<li><span>${area}</span> 
                                <button>编辑</button>
                                <button class="delete-btn"'>删除</button>
                            </li>`);
            $("#area").val("");
        })
        // 将删除按钮的点击事件绑定到父元素上，然后通过事件委托的方式处理点击事件
        $("#list").on("click", ".delete-btn", function(){
        $(this).closest("li").remove();
    });
    })

       
</script>
</html>